<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2023-09-12 13:43:30
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-12-26 15:11:53
 * @FilePath: \mould\src\views\QualityGridManage\BehaViorManage\quality-G-R-Manage\onlineRecordWork\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="page_detail" id="page_detail">
    <TableLyout>
      <template v-slot:btnbox>
        <el-button
          :disabled="item.disabled"
          type="primary"
          v-for="(item, index) in btnObj"
          :key="index"
          @click="getBtnName(item.fEncode, item.fOrder)"
          >{{ item.fFullname }}</el-button
        >
      </template>
      <template v-slot:tabcom>
        <div class="tableInfo">
          <el-table
            border
            fit
            stripe
            @row-click="rowChange"
            :highlight-current-row="true"
            :data="tableData"
            id="chartTableExpand"
            style="width: 100%"
            ref="chartTable"
            @expand-change="rowChange"
            @click="yj_viewForm(scope.row, item.label)"
            :row-key="(row) => row.fId"
            :expand-row-keys="expandRows"
          >
            <el-table-column
              type="index"
              width="50"
              label="序号"
              :index="hIndex"
              align="center"
            >
            </el-table-column>
            <el-table-column type="expand">
              <template slot-scope="scope">
                <div class="table">
                  <div class="tableInfo">
                    <el-table
                      @row-click="rowChange"
                      :ref="'expandTable' + scope.row.id"
                      :data="scope.row.materialList"
                      style="width: 100%"
                      height="100%"
                      v-loading="expandLoading"
                    >
                      <el-table-column
                        type="index"
                        width="50"
                        label="序号"
                        align="center"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="fSort"
                        label="排序号"
                        min-width="75"
                        align="center"
                        show-overflow-tooltip
                      >
                      </el-table-column>
                      <el-table-column
                        min-width="140"
                        align="center"
                        prop="fMaterialname"
                        label="材料名称"
                        show-overflow-tooltip
                      >
                        <template slot-scope="scope">
                          <span
                            style="
                              color: #409eff;
                              display: flex;
                              width: 100%;
                              justify-content: center;
                            "
                            @click="yj_viewForm(scope.row, '材料名称')"
                          >
                            {{ scope.row.fMaterialname }}
                          </span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        min-width="80"
                        align="center"
                        prop="fCreatedates"
                        label="添加日期"
                        show-overflow-tooltip
                      >
                      </el-table-column>
                      <el-table-column
                        min-width="80"
                        align="center"
                        prop="fCreateusername"
                        label="操作人"
                        show-overflow-tooltip
                      >
                      </el-table-column>
                      <el-table-column
                        min-width="280"
                        align="left"
                        prop="fNote"
                        label="描述说明"
                        show-overflow-tooltip
                      >
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              prop="fSort"
              min-width="70"
              label="排序号"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              align="center"
              min-width="150"
              prop="fVarietyname"
              label="材料种类"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span
                  style="
                    color: #409eff;
                    display: flex;
                    width: 100%;
                    justify-content: center;
                  "
                  @click="yj_viewForm(scope.row, '材料种类')"
                >
                  {{ scope.row.fVarietyname }}
                </span>
              </template>
            </el-table-column>

            <el-table-column
              align="center"
              min-width="100"
              prop="fDetecttype"
              label="检测类型"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              align="center"
              min-width="140"
              prop="fCreatedates"
              label="添加日期"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              align="center"
              min-width="120"
              prop="fCreateusername"
              label="操作人"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              min-width="80px"
              align="center"
              prop="fStatus"
              label="是否启用"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <el-switch
                  :value="scope.row.fStatus == 1 ? true : false"
                  disabled
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              min-width="200px"
              align="left"
              prop="fNote"
              label="描述说明"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
          <div class="block" v-if="navigatepageNums > 1">
            <!--  -->
            <div class="paginationInfo">
              检索到{{ queryCriteriaData.total }} 条记录 | 显示第
              <span v-if="getList.page == 1">{{ getList.page }}</span
              ><span v-else>{{ 20 * (getList.page - 1) }}</span>
              -

              <span
                v-if="queryCriteriaData.pageNum == queryCriteriaData.lastPage"
              >
                {{ queryCriteriaData.total }}</span
              >
              <span v-else> {{ 20 * getList.page }} </span>
              条记录
            </div>

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="getList.page"
              :page-size="getList.pageSize"
              layout="prev, pager, next, jumper"
              :total="queryCriteriaData.total"
            >
            </el-pagination>
          </div>
        </div>
      </template>
    </TableLyout>
    <custom-dialog
      @refreshList="refreshList"
      :currentRow="currentRow"
      :statusNum="statusNum"
      v-if="isShow"
      :dialogVisible="isShow"
      :dialogTitle="dialogTitle"
      @close="closeDialog"
    ></custom-dialog>
  </div>
</template>
<script src="./index.js"></script>
<style scoped lang="less">
@import "./index.less";
</style>
